import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Table,Input ,Button,Modal ,Row ,Col,message,Popconfirm,Divider,Pagination,Select } from 'antd';
import styles from './index.less';
const Pages = ({ storage, dispatch, loading }) => {
    const columns = [
        {
            title: '存放地点名称',
            dataIndex: 'name',
            align:'left',
        },
        {
            title: '存放地点描述',
            dataIndex: 'remark',
            align:'left',
        },
    ];
    return(
        <div className={styles.container}>
            <PagesGET dispatch={dispatch} {...storage} loading={loading.global}/>
            <Table columns={columns}
                pagination={false}
                rowKey={id =>id.id}
                loading={loading.global}
                size="small"
                dataSource={storage.getStorageData || null} />
            <Pagination current={storage.pages} showTotal={total => `共计 ${total} 条`}
                style={{float: 'right', margin: 10}} size="small" total={storage.total}
                onChange={pages => { !loading.global && dispatch({type:'storage/save',payload:{pages:pages}});}}/>
        </div>
    );
};


class PagesGET extends React.Component {


    constructor (props) {
        super(props);
        this.state = {
            d_name: "",
            name :"",
            remark:"",
        };
    }

    // 实例化生命周期函数1
    componentWillMount () {
        //判断是否登录
        this.props.dispatch({type:"storage/getStorage",payload:{
            d_name: "",
            pageNumber :1,
            pageSize :10,
        }});
    }


    render (){

        let {dispatch,pages,view,record,loading } = this.props;
        return (
            <div className={styles.containerit}>
                <Input value={this.state.d_name } placeholder="地点名称" style={{margin:10,width:256}} onChange={e=>this.setState({d_name:e.target.value})}/>
                <Button type='primary' onClick={()=>{
                    let {d_name} = this.state;
                    this.props.dispatch({type:"storage/getStorage",payload:{
                        d_name:d_name,
                        pageNumber :pages,
                        pageSize :10,
                    }});
                }
                }>查询</Button>
                <Button style={{margin:10}} onClick={()=>{
                    dispatch({type:"storage/save",payload:{view:true,record:{}}});
                    this.setState({
                        name :"",
                        remark:"",
                    });
                }}>新增库存地点</Button>

                <Modal
                    title={record.id?"修改库存地点":"新增库存地点"}
                    visible={view}
                    confirmLoading={loading}
                    onOk={()=>{
                        let {name,remark} = this.state;
                        if(name && remark){
                            let body ={
                                name: name,
                                remark:remark,
                            };
                            if(record.id){
                                body.id = record.id;
                            }
                            dispatch({type:record.id?"storage/putStorage":"storage/postStorage",payload:body});
                        }else{
                            message.error('请填写完整！');
                        }
                    }}
                    onCancel={()=>{
                        dispatch({type:"storage/save",payload:{view:false,record:{}}});
                    }}>
                    <Row>
                        <Col span={6}><span><span style={{color:'red'}}>*</span>库存地点名称:</span></Col>
                        <Col span={14}>
                            <Input style={{width: 300, marginBottom: 10, marginTop: -4}}
                                onChange={e => this.setState({name: e.target.value})}
                                value={this.state.name}
                                placeholder="库存地点名称"/>
                        </Col>
                        <Col span={6}><span><span style={{color:'red'}}>*</span>库存地点描述:</span></Col>
                        <Col span={14}>
                            <Input.TextArea rows={20} style={{width: 300, marginBottom: 10, marginTop: -4}}
                                onChange={e => this.setState({remark: e.target.value})}
                                value={this.state.remark}
                                placeholder="库存地点描述"/>
                        </Col>
                    </Row>
                </Modal>
            </div>
        );
    }
    componentWillReceiveProps (nextProps) {
        if (nextProps.record.id !== this.props.record.id) {
            // let {route_name,route_num,duty_name,point_id,remark} = nextProps.record;
            // let XJDADD= [];
            // point_id && point_id.map(item=>{
            //     XJDADD.push(item.id);
            // });
            // this.setState({
            //     route_nameADD: route_name,
            //     route_numADD:route_num,
            //     duty_nameADD:remark,
            //     XJDADD:XJDADD,
            //     FZRADD:duty_name,
            // });
        }
        if(nextProps.pages !== this.props.pages){
            let {d_name} = this.state;
            this.props.dispatch({type:"storage/getStorage",payload:{
                d_name:d_name,
                pageNumber :nextProps.pages ==0?1:nextProps.pages,
                pageSize :10,
            }});
        }
    }
}

Pages.propTypes = {
    storage: PropTypes.object,
    loading: PropTypes.object,
    dispatch: PropTypes.func,
};

export default connect(({ storage, loading }) => ({ storage, loading }))(Pages);
